<div class="progress-container">
  <d-progress #multilineBar [showContent]="showContentConfig" [multiProgressConfig]="config" [percentage]="percentage" [strokeWidth]="16">
  </d-progress>
</div>
<div class="progress-container">
  <d-progress
    [showContent]="showContentConfig"
    [percentage]="99"
    [percentageText]="content"
    [strokeColor]="lineGradientColor"
    [strokeWidth]="16"
  >
  </d-progress>
</div>
<div class="progress-container circle-type">
  <d-progress #multilineCircle [type]="'circle'" [strokeWidth]="8" [multiProgressConfig]="config"> </d-progress>
</div>
<div class="progress-container circle-type">
  <d-progress [type]="'circle'" [percentage]="85" [strokeWidth]="8" [strokeColor]="circleGradientColor"></d-progress>
</div>

<ng-template #barTemplate let-bar="bar">
  <span class="bar-text">{{ bar.name }} {{ bar.percentage }}%</span>
</ng-template>
